<template>
  <div>
    <div class="My_title__39w3V " v-if="!token">
<img class="My_bg__2j-VX " src="http://liufusong.top:8080/img/profile/bg.png" alt="">
<div class="My_info__eOYeg">
  <div class="My_myIcon__3cKIV ">
    <img class="My_avatar__2Fbh7" src="http://liufusong.top:8080/img/profile/avatar.png" alt="icon">
  </div>
  <div class="My_user__B6O1D ">
    <div class="youke">游客</div>
<van-button type="primary"  class="denglu" native-type="submit" to="/login">登录</van-button>
  </div>
</div>
    </div>
    <div class="My_title__39w3V " v-else>
<img class="My_bg__2j-VX " src="http://liufusong.top:8080/img/profile/bg.png" alt="">
<div class="My_info__eOYeg">
  <div class="My_myIcon__3cKIV ">
    <img class="My_avatar__2Fbh7" src="http://liufusong.top:8080/img/profile/avatar.png" alt="icon">
  </div>
  <div class="My_user__B6O1D ">
    <div class="youke">{{username}}</div>
<van-button type="primary" class="denglu" @click="tuichu">退出</van-button>
<p>编辑个人资料</p>
  </div>
</div>
    </div>
   <van-grid :column-num="3">
  <van-grid-item icon="star-o" text="我的收藏"  @click="collect" />
  <van-grid-item icon="wap-home-o" text="我的出租" to="/chuzu"/>
  <van-grid-item icon="clock-o" text="看房记录" />
  <van-grid-item icon="newspaper-o" text="成为房主" />
  <van-grid-item icon="contact" text="个人资料" />
  <van-grid-item icon="service-o" text="联系我们" />

</van-grid>
<div class="dibu">
  <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
</div>
    </div>
</template>

<script>

import { getToken, delToken } from '@/utils/storage'
import { getUserimfo } from '@/api/user'
export default {
  data () {
    return {
      username: ''
    }
  },
  computed: {
    token () {
      return getToken()
    }
  },
  async created () {
    // console.log(data)
    // console.log(body)
    if (getToken()) {
      const { body } = await getUserimfo()
      this.username = body.nickname
    }
  },
  methods: {
    tuichu () {
      delToken()
      this.$router.push('/login')
    },
    collect () {
      if (getToken()) {
        this.$router.push('/collect')
      } else {
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style lang='less' scoped>
.My_title__39w3V {
  min-height: 300px;
    position: relative;
   .My_bg__2j-VX {
width: 100%;
   }
   .My_info__eOYeg{
    position: absolute;
    background: #fff;
    width: 85%;
    height: 55%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;

    .My_myIcon__3cKIV{
      position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;

    .My_avatar__2Fbh7 {
    width: 100%;
    border-radius: 50%;
}
     .My_user__B6O1D{
      padding-top: 15px

    }
    button{
width: 300px;
height: 100px;
background-color: green;
    }
   }
}
}
.dibu{
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 100px
}
.dibu img{
  width: 92%;
  padding-left: 15px;
  padding-right: 15px;
}
.youke{
  margin-bottom: -10px;

}
.denglu{
 margin-top: 30px;
}
</style>
